<div class="devui-gantt-milestone" [style.left]="left + 'px'">
  <span class="icon">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="22px"
      height="24px"
      viewBox="0 0 22 24"
      version="1.1"
    >
      <defs>
        <linearGradient x1="50%" y1="6.72700158%" x2="50%" y2="91.2568893%" id="gantt-linearGradient-1">
          <stop stop-color="#3DCCA6" offset="0%" />
          <stop stop-color="#2AA7AF" offset="100%" />
        </linearGradient>
        <path
          d="M14,1.15470054 L20.3923048,4.84529946 C21.6299092,5.55983064 22.3923048,6.88033872 22.3923048,8.30940108 L22.3923048,15.6905989 C22.3923048,17.1196613 21.6299092,18.4401694 20.3923048,19.1547005 L14,22.8452995 C12.7623957,23.5598306 11.2376043,23.5598306 10,22.8452995 L3.60769515,19.1547005 C2.37009085,18.4401694 1.60769515,17.1196613 1.60769515,15.6905989 L1.60769515,8.30940108 C1.60769515,6.88033872 2.37009085,5.55983064 3.60769515,4.84529946 L10,1.15470054 C11.2376043,0.440169359 12.7623957,0.440169359 14,1.15470054 Z"
          id="gantt-path-2"
        />
        <linearGradient x1="50%" y1="0%" x2="50%" y2="50%" id="gantt-linearGradient-4">
          <stop stop-color="#FFFFFF" offset="0%" />
          <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="51.6276154%" y2="68.3310347%" id="gantt-linearGradient-5">
          <stop stop-color="#FFFFFF" offset="0%" />
          <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="70.5804357%" id="gantt-linearGradient-6">
          <stop stop-color="#FFFFFF" offset="0%" />
          <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="71.0876747%" id="gantt-linearGradient-7">
          <stop stop-color="#FFFFFF" offset="0%" />
          <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="60.3844779%" id="gantt-linearGradient-8">
          <stop stop-color="#FFFFFF" offset="0%" />
          <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%" />
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="gantt-linearGradient-9">
          <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%" />
          <stop stop-color="#FFFFFF" offset="100%" />
        </linearGradient>
        <filter x="-25.0%" y="-75.0%" width="150.0%" height="250.0%" filterUnits="objectBoundingBox" id="gantt-filter-10">
          <feGaussianBlur stdDeviation="1" in="SourceGraphic" />
        </filter>
        <linearGradient x1="-33.9878453%" y1="3.1788779%" x2="67.7654261%" y2="81.2841156%" id="gantt-linearGradient-11">
          <stop stop-color="#FF790E" offset="0%" />
          <stop stop-color="#FECC55" offset="100%" />
        </linearGradient>
        <linearGradient x1="71.1217155%" y1="42.8128234%" x2="17.9433277%" y2="-14.3609467%" id="gantt-linearGradient-12">
          <stop stop-color="#FFE88E" offset="0%" />
          <stop stop-color="#FF790E" offset="100%" />
        </linearGradient>
      </defs>
      <g id="gantt-page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="gantt-04fix" transform="translate(-189.000000, -423.000000)">
          <g id="gantt-Group-2" transform="translate(40.000000, 417.000000)">
            <g id="gant-group-4" transform="translate(148.000000, 6.000000)">
              <mask id="gantt-mask-3" fill="white">
                <use xlink:href="#gantt-path-2" />
              </mask>
              <use id="gantt-men" fill="url(#gantt-linearGradient-1)" xlink:href="#gantt-path-2" />
              <polygon fill="url(#gantt-linearGradient-4)" opacity="0.200000003" mask="url(#gantt-mask-3)" points="10 0 14 0 13 13 11 13" />
              <polygon
                fill="url(#gantt-linearGradient-5)"
                opacity="0.200000003"
                mask="url(#gantt-mask-3)"
                transform="translate(17.500000, 11.000000) rotate(-270.000000) translate(-17.500000, -11.000000) "
                points="14.5 4.5 18.5 4.5 20.5 17.5 19.5 17.5"
              />
              <polygon
                fill="url(#gantt-linearGradient-6)"
                opacity="0.200000003"
                mask="url(#gantt-mask-3)"
                transform="translate(7.000000, 11.000000) scale(-1, 1) rotate(-270.000000) translate(-7.000000, -11.000000) "
                points="4 4.5 8 4.5 10 17.5 9 17.5"
              />
              <polygon
                fill="url(#gantt-linearGradient-7)"
                opacity="0.200000003"
                mask="url(#gantt-mask-3)"
                transform="translate(8.110913, 8.110913) rotate(-45.000000) translate(-8.110913, -8.110913) "
                points="6.1109127 1.6109127 10.1109127 1.6109127 9.1109127 14.6109127 7.1109127 14.6109127"
              />
              <polygon
                fill="url(#gantt-linearGradient-8)"
                opacity="0.200000003"
                mask="url(#gantt-mask-3)"
                transform="translate(15.889087, 8.110913) rotate(-315.000000) translate(-15.889087, -8.110913) "
                points="13.8890873 1.6109127 17.8890873 1.6109127 16.8890873 14.6109127 14.8890873 14.6109127"
              />
              <ellipse
                fill="url(#gantt-linearGradient-9)"
                opacity="0.5"
                filter="url(#filter-10)"
                mask="url(#gantt-mask-3)"
                cx="12"
                cy="17"
                rx="6"
                ry="2"
              />
              <polygon fill="url(#gantt-linearGradient-11)" mask="url(#gantt-mask-3)" points="12 8 18 9 15 11 18 13 11 14" />
              <polygon fill="url(#gantt-linearGradient-12)" mask="url(#gantt-mask-3)" points="10 6 14 7 13 13 9 13" />
              <polygon fill="#FFE3A0" mask="url(#gantt-mask-3)" points="10 6 11 6 9 17 8 17" />
              <polygon fill="#B4832C" mask="url(#gantt-mask-3)" points="13 13 11 14 11.1707479 13" />
              <rect fill="#000000" opacity="0.100000001" mask="url(#gantt-mask-3)" x="7" y="17" width="10" height="1" />
            </g>
          </g>
        </g>
      </g>
    </svg>
  </span>
  <span>{{ title }}</span>
</div>
